<template>
  <el-dialog title="编辑连接" :visible.sync="editLinkModalShow" :width="modalWidth">

    <el-row :gutter="20">
      <el-col :span="8" class="lable">
        连接名称:
      </el-col>
      <el-col :span="14">
        <el-input
          placeholder="请输入内容"
          v-model="currentLinkInfoCopy.name">
        </el-input>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="editLinkModalShow = false">取 消</el-button>
      <el-button type="primary" @click="updateLink">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "EditLinkModal",
    computed: {
      ...mapState(["currentLinkInfoCopy","modalWidth"]),
      editLinkModalShow: {
        get() {
          return this.$store.getters.editLinkModalShow;
        },
        set(flag) {
          this.$store.dispatch("editLinkModalShow", flag);
        }
      }
    }, methods: {
      updateLink() {
        this.$store.dispatch("updateLink");
        this.$store.dispatch("editLinkModalShow", false);
      }
    }
  }
</script>

<style scoped>
  .lable {
    padding: 10px;
    text-align: right;
  }
  .el-input{
    width: 80%;
  }
</style>
